<template>
  <div class="app-login" @keypress.enter="handleSubmitLogin">
    <div class="head">
      <img src="@/static/login-head@2x.png">
      <h1>客服工作台</h1>
    </div>
    <div class="body">
      <div class="title">密码登录</div>
      <div class="login-form">
        <el-form ref="login_form_ref" :model="loginForm" :rules="fromRules">
          <el-form-item prop="shopCode">
            <el-input placeholder="请输入商户编码" v-model="loginForm.shopCode" clearable ref="shop_code_ref">
              <div slot="prepend" class="prepend-slot">
                <img src="@/assets/img/shop-code@2x.png">
              </div>
            </el-input>
          </el-form-item>
          <el-form-item prop="userName">
            <el-input placeholder="请输入用户名/手机号" v-model="loginForm.userName" clearable>
              <div slot="prepend" class="prepend-slot">
                <img src="@/assets/img/login-user@2x.png">
              </div>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="请输入密码" v-model="loginForm.password" oncopy="return false"
            onpaste="return false" type="password" clearable show-password>
              <div slot="prepend" class="prepend-slot">
                <img src="@/assets/img/login-pwd@2x.png">
              </div>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="button-box">
        <el-button :loading="btnLoading" @click="handleSubmitLogin">登录</el-button>
        <span class="login-error" v-if="loginError">{{loginError}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { passwordMd5 } from '@/utils'
export default {
  name: "AppLogin",
  data() {
    return {
      loginForm: {
        userName: "",
        password: "",
        shopCode: ''
      },
      fromRules: {
        userName: [
          {validator: this.handleUserValidator, trigger: 'change'}
        ],
        password: [
          {validator: this.handlePasswordValidator, trigger: 'change'}
        ],
        shopCode: [
          {validator: this.handleShopCodeValidator, trigger: 'change'}
        ]
      },
      btnLoading: false,
      loginError: ''
    }
  },
  methods: {
    handleUserValidator(rule, value, callback) {
      const reg = /[\u4e00-\u9fa5]/
      if (!value.trim()) {
        callback(new Error('用户名/手机号、不能为空'))
      } else if (reg.test(value) || value.length > 20) {
        callback(new Error('输入不合法，请输入3到20英文、英文与数字的组合'))
      } else {
        callback()
      }
    },
    handlePasswordValidator(rule, value, callback) {
      if (!value.trim()) {
        callback(new Error('密码不能为空'))
      } else {
        callback()
      }
    },
    handleShopCodeValidator(rule, value, callback) {
      const reg = /[\u4e00-\u9fa5]/
      if (!value.trim()) {
        callback(new Error('商户编码不能为空'))
      } else if (reg.test(value) || value.length > 20) {
        callback(new Error('输入不合法，请输入3到20英文、英文与数字的组合'))
      } else {
        callback()
      }
    },

    handleSubmitLogin() {
      if (this.btnLoading) return
      this.$refs.login_form_ref.validate().then(async (flag) => {
        if (flag) {
          this.btnLoading = true;
          this.loginForm.password = passwordMd5(this.loginForm.password)
          let result =  await this.login(this.loginForm)
          if (result.success === true) {
            const user = result.result.user
            user.icsUid = ''
            const token = result.result.token
            const userMenus = result.result.menus
            this.$store.commit('user/SET_TOKEN', token)
            this.$store.commit('user/setUserInfo', user)
            this.$store.commit('user/setIsLogin', true)
            this.$store.dispatch('permission/generateRoutes', userMenus).then((arr) => {

            })
            const baseInfo = await this.getBaseInfo()
            if (baseInfo.success) {
              const workStatus = baseInfo.result.workStatus
              this.$store.commit('user/setBaseInfo', baseInfo.result)
              this.$store.commit('user/setWorkStatus', workStatus)
              await this.$router.push('/online')
            } else {
              this.$message.error(baseInfo.appMsg)
            }
            this.btnLoading = false;
          } else {
            this.btnLoading = false;
            this.$message.error(result.appMsg)
          }
        }
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.shop_code_ref.focus()
    })
  }
}
</script>

<style lang="scss">
@import "./login";
</style>
